import { cn } from '@/utils/cn'

interface HeaderProps {
  leading?: React.ReactNode
  title?: string
  titleView?: React.ReactNode
  trailing?: React.ReactNode
  hideBorder?: boolean
}

/**
 * 窗体的 Header
 *
 * 可在 leading 和 trailing 位置选择性插入图标按钮等内容
 * title 和 titleView 二选一，当传入 titleView 时优先显示 titleView
 */
export function Header(props: HeaderProps) {
  return (
    <div
      className={cn(
        'flex items-center justify-between px-2 h-[3.25rem] select-none',
        !props.hideBorder && 'border-b boder-solid boder-border',
      )}
    >
      <div className='flex items-center'>
        {props.leading}
        {props.titleView || (
          <span className='px-2 py-0.5 text-foreground font-medium text-base'>
            {props.title || ''}
          </span>
        )}
      </div>
      {props.trailing}
    </div>
  )
}
